/**
 * @author: 小红
 * @date: 2025/3/27
 * @Description: 内容编辑组件
 */
import { ApiUpload } from '@/api/common.ts';
import { FILE_PREVIEW } from '@/enums/appEnum.ts';
import { Message } from '@arco-design/web-vue';
import { useCurrentElement } from '@vueuse/core';
import { defineComponent, ref } from 'vue';
import EditorJS, { type BlockToolConstructable, LogLevels } from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
import Image from '@editorjs/image';
import Table from '@editorjs/table';
import Code from '@editorjs/code';
import InlineCode from '@editorjs/inline-code';
// @ts-ignore
import Delimiter from '@coolbytes/editorjs-delimiter';
import zh from './i18n.json';
import './style.scss';

/**
 * 创建编辑
 * @param holder
 * @param data
 */
function createEditor(holder: HTMLElement, data: any) {
	return new EditorJS({
		holder,
		data,
		placeholder: '输入"/" 触发更多工具',
		readOnly: false,
		i18n: {
			messages: zh,
		},
		logLevel: 'VERBOSE' as LogLevels,
		tools: {
			header: {
				class: Header as unknown as BlockToolConstructable,
				config: {
					placeholder: '输入标题',
				},
				inlineToolbar: true,
			},
			list: {
				class: List as unknown as BlockToolConstructable,
				inlineToolbar: true,
			},
			paragraph: {
				class: Paragraph as unknown as BlockToolConstructable,
				inlineToolbar: true,
			},
			image: {
				class: Image as unknown as BlockToolConstructable,
				inlineToolbar: true,
				config: {
					uploader: {
						uploadByFile(file: File) {
							return new Promise(async (resolve, reject) => {
								const formDataFile = new FormData();
								formDataFile.append('file', file);

								const data = await ApiUpload(formDataFile);

								if (!data) {
									reject('图片上传失败，请重试');
									Message.error('图片上传失败，请重试');
								}

								resolve({
									success: 1,
									file: {
										url: FILE_PREVIEW + data.filename,
									},
								});
							});
						},
					},
				},
			},

			table: {
				class: Table as unknown as BlockToolConstructable,
				inlineToolbar: true,
			},
			code: {
				class: Code as unknown as BlockToolConstructable,
				inlineToolbar: true,
				config: {
					endpoints: {},
				},
			},
			inlineCode: {
				class: InlineCode as unknown as BlockToolConstructable,
				shortcut: 'CMD+SHIFT+M',
			},
			delimiter: {
				class: Delimiter as unknown as BlockToolConstructable,
				inlineToolbar: true,
			},
		},
	});
}

/**
 * 组件
 */
export default defineComponent({
	name: 'ContentEditor',
	props: ['defaultValue'],
	setup(props, ctx) {
		const currentElement: Ref<HTMLElement> = useCurrentElement();

		const editor = ref<EditorJS | null>(null);

		onMounted(() => {
			editor.value = createEditor(currentElement.value, JSON.parse(props.defaultValue) || {});
		});

		async function getContent() {
			let json: any = await editor.value?.save();

			try {
				json = JSON.stringify(json);
			} catch (_e) {}

			return json;
		}

		ctx.expose({
			getContent,
		});

		return () => <div id="contentEditor"></div>;
	},
});
